<template>
  <ContainerGroup>
    <Container style="margin-bottom:10px;">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handlerReset"
      />
    </Container>
    <Container height="fill" display="flexY">
      <Table
        :columns="tableColumns"
        :loading="tableLoading"
        :data="tableData"
        :pagination="{
          total: total,
          current: currentPage,
          pageSize: pageSize,
        }"
        @paginationChange="pageChange"
      >
        <template #n1Count="{row}">
          <el-switch
            v-model="row.isStsffRepresent"
            :width="50"
            active-color="#217dfa"
            inactive-color="#E5E5E5"
            :active-value="'1'"
            :inactive-value="'0'"
          />
        </template>
        <template #status="{ row }">{{ row.status===0?'待处理':row.status===1?'已修正':'已驳回' }}</template>
        <template #caozuo="{ row }">
          <Tooltip content="查看" icon="view" @click="handleLookData(row)" />
          <Tooltip v-if="row.status===0" content="处理" icon="edit" @click="handleEidt(row)" />
        </template>
      </Table>
      <!-- 新增、编辑、查看 -->
      <Drawer
        :title="title"
        :visible="isShow"
        :header-color="'#e7ecf8'"
        width="500px"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="isShow = false"
        @submit="handleSubmit"
      >
        <el-form
          ref="ruleForm"
          size="mini"
          :model="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="f-title">项目基础信息</div>
          <el-form-item label="财务编码：" prop="financialCode">
            <el-select
              v-if="btnType===1"
              v-model="ruleForm.financialCode"
              style="width:100%;"
              placeholder="请选择财务编码"
              filterable
              clear
            >
              <el-option
                v-for="item in cwbmList"
                :key="item.acCode"
                :label="item.name"
                :value="item.acCode"
              />
            </el-select>
            <span v-else>{{ ruleForm.financialCode }}</span>
          </el-form-item>
          <el-form-item label="项目编号：">
            <el-select
              v-if="btnType===1"
              v-model="ruleForm.projectCode"
              style="width:100%;"
              placeholder="请选择项目编号"
              filterable
              clear
            >
              <el-option
                v-for="item in xmList"
                :key="item.acCode"
                :label="item.name"
                :value="item.acCode"
              />
            </el-select>
            <span v-else>{{ ruleForm.projectCode }}</span>
          </el-form-item>
          <el-form-item label="项目简称：" prop="financialName">
            <el-select
              v-if="btnType===1"
              v-model="ruleForm.financialName"
              placeholder="请选择项目简称"
              filterable
              style="width:100%;"
              clear
            >
              <el-option
                v-for="item in xmjcList"
                :key="item.acCode"
                :label="item.name"
                :value="item.acCode"
              />
            </el-select>
            <span v-else>{{ ruleForm.financialName }}</span>
          </el-form-item>
          <el-form-item label="项目全称：">
            <el-select
              v-if="btnType===1"
              v-model="ruleForm.projectInfo"
              placeholder="请选择项目全称"
              style="width:100%;"
              filterable
              clear
            >
              <el-option
                v-for="item in xmqcList"
                :key="item.acCode"
                :label="item.name"
                :value="item.acCode"
              />
            </el-select>
            <span v-else>{{ ruleForm.projectInfo }}</span>
          </el-form-item>
          <el-form-item label="项目负责人：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.userName"
              placeholder="请输入项目负责人"
              disabled
            />
            <span v-else>{{ ruleForm.userName }}</span>
          </el-form-item>
          <el-form-item label="所属科室：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.deptName"
              placeholder="请输入所属科室"
              disabled
            />
            <span v-else>{{ ruleForm.deptName }}</span>
          </el-form-item>
          <el-form-item label="配套经费：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.total"
              placeholder="请输入配套经费"
              disabled
            />
            <span v-else>{{ ruleForm.total }}元</span>
          </el-form-item>
          <div class="f-title">申诉信息</div>
          <el-form-item label="科目名称：">
            <el-select
              v-if="btnType===1"
              v-model="ruleForm.accountName"
              style="width:100%;"
              placeholder="请选择科目名称"
              filterable
              clear
            >
              <el-option
                v-for="item in kmmcList"
                :key="item.acCode"
                :label="item.name"
                :value="item.acCode"
              />
            </el-select>
            <span v-else>{{ ruleForm.accountName }}</span>
          </el-form-item>
          <el-form-item label="科目编码：" prop="accountCode">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.accountCode"
              placeholder="请输入科目编码"
              disabled
            />
            <span v-else>{{ ruleForm.accountCode }}</span>
          </el-form-item>
          <el-form-item label="费用类别：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.expenseTypeName"
              placeholder="请输入费用类别"
              disabled
            />
            <span v-else>{{ ruleForm.expenseTypeName }}</span>
          </el-form-item>
          <el-form-item label="摘要：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.description"
              placeholder="请输入摘要"
              disabled
            />
            <span v-else>{{ ruleForm.description }}</span>
          </el-form-item>
          <el-form-item label="余额(元)：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.balance"
              placeholder="请输入余额(元)"
              disabled
            />
            <span v-else>{{ ruleForm.balance }}</span>
          </el-form-item>
          <el-form-item label="日期：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.operDtime"
              placeholder="请输入日期"
              disabled
            />
            <span v-else>{{ ruleForm.operDtime }}</span>
          </el-form-item>
          <el-form-item label="凭证号数：">
            <el-input
              v-if="btnType===1"
              v-model.trim="ruleForm.accountNum"
              placeholder="请输入凭证号数"
              disabled
            />
            <span v-else>{{ ruleForm.accountNum }}</span>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-if="btnType===1||btnType===2"
              v-model.trim="ruleForm.remarks"
              type="textarea"
              :rows="5"
              placeholder="请输入备注"
              maxlength="50"
            />
            <span v-else>{{ ruleForm.remarks }}</span>
          </el-form-item>
          <template v-if="btnType===3">
            <div class="f-title">{{ ruleForm.status===0?'待处理':ruleForm.status===1?'已修正':'已驳回' }}</div>
            <el-form-item label="处理结果：">
              <span>{{ ruleForm.status===0?'待处理':ruleForm.status===1?'已修正':'已驳回' }}</span>
            </el-form-item>
            <el-form-item label="处理意见：">
              <span>{{ ruleForm.handlingOpinions }}</span>
            </el-form-item>
            <el-form-item label="处理人：">
              <span>{{ ruleForm.handleName }}</span>
            </el-form-item>
            <el-form-item label="处理时间：">
              <span>{{ ruleForm.updateTime }}</span>
            </el-form-item>
          </template>
          <!-- 状态标识 -->
          <div class="l-status-y">
            <div
              :class="['f-self',ruleForm.status===0?'doing':ruleForm.status===1?'yxz':'bh']"
            >{{ ruleForm.status===0?'待处理':ruleForm.status===1?'已修正':'已驳回' }}</div>
          </div>
        </el-form>
      </Drawer>
      <!-- 项目申诉处理 -->
      <Dialog
        title="项目申诉处理"
        :visible="dialogVisible"
        :footer-btns="[
          {
            text: '已修正',
            type: 'primary',
            loading: tgLoading,
            trigger: 'confirm'
          },
          {
            text: '驳回',
            type: 'delete',
            loading: bhLoading,
            trigger: 'reject'
          }
        ]"
        @reject="handleReject"
        @confirm="handleConfirm"
        @cancel="dialogVisible=false"
      >
        <div>
          <el-form :model="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="处理意见" prop="handlingOpinions">
              <div class="input-box">
                <el-input
                  v-model.trim="ruleForm.handlingOpinions"
                  type="textarea"
                  :rows="4"
                  maxlength="50"
                  placeholder="请输入处理意见"
                />
              </div>
            </el-form-item>
          </el-form>
        </div>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  pageForZxDealProjectAppeal,
  queryZxDealProjectAppealForDetail,
  editZxProjectAppeal,
  alreadyEditForZxProjectAppeal
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'ProjectAppealRecord', // 项目申诉记录
  data() {
    return {
      confirmLoading: false,
      btnType: 1,
      cwbmList: [],
      xmList: [],
      xmjcList: [],
      xmqcList: [],
      kmbmList: [],
      kmmcList: [],
      ruleForm: {
        financialCode: '',
        projectCode: '',
        financialName: '',
        projectInfo: '',
        userName: '',
        deptName: '',
        total: '',
        accountName: '',
        accountCode: '',
        expenseTypeName: '',
        description: '',
        balance: '',
        operDtime: '',
        accountNum: '',
        remarks: '',
        handlingOpinions: '',
        handleName: '',
        updateTime: '',
        status: ''
      },
      filterElements: [
        {
          key: 'projectCode',
          type: 'input',
          label: '项目编号',
          value: ''
        },
        {
          key: 'projectEasyName',
          type: 'input',
          label: '项目简称',
          value: ''
        },
        {
          key: 'selectAll',
          type: 'input',
          label: '综合搜索',
          placeholder: '科目编号/科目名称/凭证号数',
          value: '',
          width: 160
        },
        {
          key: 'createTime',
          label: '日期',
          type: 'date-picker',
          format: 'yyyy-MM-dd',
          expiredDate: {},
          value: ''
        },
        {
          key: 'status',
          type: 'Select',
          label: '状态',
          value: '',
          width: 210,
          options: [
            {
              label: '待处理',
              value: '0'
            },
            {
              label: '已修正',
              value: 1
            },
            {
              label: '已驳回',
              value: 2
            }
          ]
        },
        {
          key: 'createName',
          type: 'input',
          label: '申诉人',
          value: ''
        }
      ],
      title: '添加申诉',
      tableColumns: [
        {
          title: '财务编码',
          dataIndex: 'financeCode'
        },
        {
          title: '项目编号',
          dataIndex: 'projectCode'
        },
        {
          title: '项目简称',
          dataIndex: 'projectEasyName'
        },
        {
          title: '凭证号数',
          dataIndex: 'accountNum'
        },
        {
          title: '科目编码',
          dataIndex: 'accountCode'
        },
        {
          title: '科目名称',
          dataIndex: 'accountName'
        },
        {
          title: '备注',
          dataIndex: 'remarks'
        },
        {
          title: '申诉人',
          dataIndex: 'createUserName'
        },
        {
          title: '处理人',
          dataIndex: 'userName'
        },
        {
          title: '状态',
          dataIndex: 'status',
          type: 'otherTag'
        },
        {
          title: '申诉时间',
          dataIndex: 'createTime',
          width: 160
        },
        {
          title: '操作',
          width: 160,
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      isShow: false,
      currentRow: {},
      bhLoading: false,
      tgLoading: false,
      dialogVisible: false
    }
  },
  methods: {
    handleReject() {
      // 驳回
      if (!this.ruleForm.handlingOpinions) {
        this.$message.warning('请输入处理意见')
        return
      }
      this.bhLoading = true
      this.apiCommon(2)
    },
    handleConfirm() {
      // 通过
      this.tgLoading = true
      this.apiCommon(1)
    },
    apiCommon(status) {
      const param = {
        handlingOpinions: this.ruleForm.handlingOpinions,
        id: this.currentRow.id,
        status: status
      }
      alreadyEditForZxProjectAppeal(param).then(res => {
        this.tgLoading = false
        this.bhLoading = false
        this.dialogVisible = false
        if (res.data.code === 200) {
          this.getData()
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getData() {
      const params = {
        projectCode: this.newCondition?.projectCode,
        selectAll: this.newCondition?.selectAll,
        projectEasyName: this.newCondition?.projectEasyName,
        status: this.newCondition?.status,
        createDate: this.newCondition?.createTime,
        createName: this.newCondition?.createName,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.tableLoading = true
      pageForZxDealProjectAppeal(params)
        .then(res => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    getDetails(row) {
      const param = {
        id: row.id,
        financeCode: row.financeCode
      }
      queryZxDealProjectAppealForDetail(param).then(res => {
        if (res.data.code === 200) {
          const result = res.data.data

          const infoObject = {
            ...result.zxProjectHandingResult,
            ...result.zxProjectBaseInfo,
            ...result.zxProjectAppealInfo
          }

          console.log('infoObject', infoObject)

          for (const key in this.ruleForm) {
            this.ruleForm[key] = infoObject[key]
          }
        }
      })
    },
    handleSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          const param = {
            remarks: this.ruleForm.remarks,
            id: this.currentRow.id
          }
          this.confirmLoading = true
          editZxProjectAppeal(param).then(res => {
            this.confirmLoading = false
            this.isShow = false
            if (res.data.code === 200) {
              this.getData()
              this.$message.success(res.data.message)
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleLookData(row) {
      // 查看数据项
      this.title = '查看申诉记录'
      this.btnType = 3
      this.getDetails(row)
      this.isShow = true
    },
    handleEidt(row) {
      // 处理
      this.currentRow = row
      this.btnType = 2
      this.getDetails(row)
      this.dialogVisible = true
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData(value)
    },
    handlerReset(val) {
      this.handleSearch()
    },
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.demo-ruleForm {
  margin: 10px 15px;
  position: relative;
  .l-status-y {
    position: absolute;
    right: 30px;
    top: 10px;
    .f-self {
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border-radius: 100%;
      transform: rotate(-38deg);
    }
    .doing {
      border: 1px solid #409eff;
      color: #409eff;
    }
    .yxz {
      border: 1px solid #67c23a;
      color: #67c23a;
    }
    .bh {
      border: 1px solid #f56c6c;
      color: #f56c6c;
    }
  }
  .f-title {
    margin-bottom: 10px;
    font-weight: 700;
  }
}
</style>
